import React, { Component } from 'react';
// import { Form, Input, Select } from 'antd';
import styles from './index.css';
import MapForm from '@/components/MapFormComponent';
import { FormComponentProps } from 'antd/lib/form';
import { Select } from 'antd';
import { DeviceTypeItem, ConnectState, AreaOptionItem } from '@/models/connect';
import { connect } from 'dva';
import _ from 'lodash';
import { Dispatch, AnyAction } from 'redux';
import { DeviceInfo } from '@/models/device';

interface BaseFormProps {
  deviceTypeNo?: number;
  deviceTypeNoOptions: DeviceTypeItem[];
  dispatch: Dispatch<AnyAction>;
  areaOptions: AreaOptionItem[];
  deviceInfo: DeviceInfo;
}

interface BaseFormState {}
@connect(({ device }: ConnectState) => ({
  deviceTypeNoOptions: device.deviceTypeNoOptions,
  areaOptions: device.areaOptions,
}))
class BaseForm extends Component<BaseFormProps, BaseFormState> {
  componentDidMount() {
    const { deviceTypeNo, dispatch } = this.props;
    dispatch({
      type: 'device/setSelectDeviceTypeNo',
      payload: deviceTypeNo,
    });
  }

  render() {
    const { deviceTypeNoOptions, areaOptions, deviceInfo = {} } = this.props;

    // 获取资产种类
    const deviceObj: DeviceTypeItem | undefined = _.find(
      deviceTypeNoOptions,
      (item: DeviceTypeItem) => item.deviceTypeNo === deviceInfo.deviceTypeNo,
    );
    console.log(deviceObj,43)

    // 获取品牌名称
    const brandDict = JSON.parse(localStorage.brandDict);
    const brandObj: any = _.find(brandDict, (item: any) => item.dictValue === deviceInfo.brandNo);

    // 获取单位名称
    const unitNameDict = JSON.parse(localStorage.unitNameDict);
    const unitNameObj: any = _.find(
      unitNameDict,
      (item: any) => item.dictValue === deviceInfo.unitNameId,
    );
    console.log(unitNameObj,54)
    // 获取所属部门名
    const deptDict = JSON.parse(localStorage.deptDict);
    const deptObj: any = _.find(
      deptDict,
      (item: any) => item.sdtDeptId === deviceInfo.departmentId,
    );

    // 获取安装区域名
    const areaObj: AreaOptionItem | undefined = _.find(
      areaOptions,
      (item: AreaOptionItem) => item.treeTypeId === deviceInfo.treeTypeId,
    );

    return (
      <div className={styles.ulcontainer}>
        <ul>
          <li>
            <div className={styles.liitem1}>序号</div>
            <div className={styles.liitem2}>{deviceInfo.sort}</div>
          </li>
          <li>
            <div className={styles.liitem1}>资产类别</div>
            <div className={styles.liitem2}>{deviceInfo.deviceTypeParentName}</div>
          </li>
          <li>
            <div className={styles.liitem1}>资产种类</div>
            <div className={styles.liitem2}>{deviceObj && deviceObj.deviceTypeName}</div>
          </li>
          <li>
            <div className={styles.liitem1}>设备名称</div>
            <div className={styles.liitem2}>{deviceInfo.deviceName}</div>
          </li>
          <li>
            <div className={styles.liitem1}>品牌</div>
            <div className={styles.liitem2}>{brandObj && brandObj.dictLabel}</div>
          </li>
          <li>
            <div className={styles.liitem1}>厂商唯一编号</div>
            <div
              className={styles.liitem2}
              style={{
                overflow: 'hidden',
                textOverflow: 'ellipsis',
              }}
            >
              {deviceInfo.serialNumber}
            </div>
          </li>
          <li>
            <div className={styles.liitem1}>型号</div>
            <div className={styles.liitem2}>{deviceInfo.model}</div>
          </li>
          <li>
            <div className={styles.liitem1}>规格</div>
            <div className={styles.liitem2}>{deviceInfo.specs}</div>
          </li>
          <li>
            <div className={styles.liitem1}>生产单位</div>
            <div className={styles.liitem2}>{deviceInfo.productionCompany}</div>
          </li>
          <li>
            <div className={styles.liitem1}>生产日期</div>
            <div className={styles.liitem2}>{deviceInfo.productionTime ? deviceInfo.productionTime.split(' ')[0]:''}</div>
          </li>
          <li>
            <div className={styles.liitem1}>供货单位</div>
            <div className={styles.liitem2}>{deviceInfo.supplyCompany}</div>
          </li>
          <li>
            <div className={styles.liitem1}>采购日期</div>
            <div className={styles.liitem2}>{deviceInfo.purchaseTime ? deviceInfo.purchaseTime.split(' ')[0]: ''}</div>
          </li>
          <li>
            <div className={styles.liitem1}>维护周期</div>
            <div className={styles.liitem2}>{deviceInfo.maintenanceCycle}</div>
          </li>
          <li>
            <div className={styles.liitem1}>单位名称</div>
            <div className={styles.liitem2}>{deviceInfo.unitName}</div>
          </li>
          <li>
            <div className={styles.liitem1}>所属部门</div>
            <div className={styles.liitem2}>{deptObj && deptObj.sdtDeptName}</div>
          </li>
          <li>
            <div className={styles.liitem1}>使用年限</div>
            <div className={styles.liitem2}>{deviceInfo.serviceLife}</div>
          </li>
          <li>
            <div className={styles.liitem1}>使用负责人</div>
            <div className={styles.liitem2}>{deviceInfo.useUser}</div>
          </li>
          <li>
            <div className={styles.liitem1}>投入使用日期</div>
            <div className={styles.liitem2}>{deviceInfo.useTime}</div>
          </li>
          <li>
            <div className={styles.liitem1}>安装区域</div>
            <div className={styles.liitem2}>{deviceInfo.treeName}</div>
          </li>
          <li>
            <div className={styles.liitem1}>详细位置</div>
            <div className={styles.liitem2}>{deviceInfo.positionDetails}</div>
          </li>
        </ul>
      </div>
    );
  }
}

export default BaseForm;
